<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员管理</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/main.css"  media="all">
</head>
<body>
<!-- 修改的form表单 -->
<form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 20px 30px 0 0">

    <div class="layui-form-item">
        <label class="layui-form-label">管理员用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="管理员用户名" autocomplete="on" class="layui-input">
            <input type="hidden" name="id">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">管理员密码</label>
        <div class="layui-input-inline">
            <input type="password" name="pwd" placeholder="管理员密码" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态设置</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="冻结该管理员" checked>
            <input type="radio" name="status" value="0" title="正常">
            <input type="radio" name="status" value="2" title="已被删除">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmit">提交修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 添加的form表单 -->
<form class="layui-form" id="addForm" lay-filter="addFormFilter" style="display: none;padding: 20px 30px 0 0">

    <div class="layui-form-item">
        <label class="layui-form-label">管理员用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="管理员用户名" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">管理员密码</label>
        <div class="layui-input-inline">
            <input type="password" name="pwd" placeholder="管理员密码" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态设置</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="冻结该管理员" checked>
            <input type="radio" name="status" value="0" title="正常">
            <input type="radio" name="status" value="2" title="已被删除">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSubmit">提交添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="layui/layui.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/html" id="status">
    {{#  if(d.status == 2){ }}
    已删除
    {{#  } else if(d.status == 1) {   }}
    已被冻结
    {{#  } else {   }}
    正常
    {{#  }          }}
</script>
<!--工具栏-->
<table id="adminTable" lay-filter="adminTableFilter"></table>
<script type="text/html" id="tb1">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="ban">冻结</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="tb2">
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">批量删除</a>
    <a class="layui-btn layui-btn-sm" lay-event="add">添加管理员</a>
</script>
<script>
    layui.use(['table', 'form', 'laydate', 'layer','upload'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;

        table.render({
            elem: '#adminTable',
            url: 'admin/show',
            page: true,
            limit: 3,
            limits: [3, 5, 7],
            toolbar: '#tb2',
            cols: [[
                {type: 'checkbox'}
                , {title: '编号', field: 'id'}
                , {title: '用户名', field: 'name'}
                , {title: '密码', field: 'pwd'}
                , {title: '状态', templet:'#status'}
                , {title: '操作', toolbar: '#tb1'}
            ]]
        });

        // 批量删除
        table.on('toolbar(adminTableFilter)',function (obj) {
            var status = table.checkStatus(obj.config.id);
            if (obj.event == 'add'){
                layer.open({
                    type:1,
                    content: $('#addForm'),
                    title:'添加管理员'
                })

            }else if (obj.event == 'del'){
                var data = status.data;
                if (data.length == 0){
                    layer.msg('请至少勾选一项！');
                    return;
                }else {
                    var ids = [];
                    for (var i = 0; i<data.length; i++){
                        ids.push(data[i].id);
                    }
                }

                $.ajax({
                    url: 'admin/delete',
                    dataType: 'json',
                    data: 'id=' + ids,
                    success:function (result) {
                        if (result.isDelete){
                            layer.msg('删除成功！');
                            table.reload('adminTable');
                        }else {
                            layer.msg('删除失败！');
                            table.reload('adminTable');
                        }
                    }
                })
            }
        })

        // 增加图片
        form.on('submit(addSubmit)',function () {
            $.ajax({
                url:'admin/register',
                dataType:'json',
                data:$('#addForm').serialize(),
                success:function (result) {
                    if (result.isAdd){
                        layer.closeAll();
                        layer.msg('添加成功！');
                        table.reload('adminTable');
                        $("#addForm")[0].reset();
                    }else {
                        layer.closeAll();
                        layer.msg('添加失败！');
                        table.reload('adminTable');
                        $("#addForm")[0].reset();
                    }
                }
            })
            return false;
        });

        // 绑定单个删除事件

        table.on('tool(adminTableFilter)', function (obj) {
            var data = obj.data;
            var id = obj.data.id;
            console.log(obj);
            if (obj.event == 'del') {
                layer.confirm('确认要删除？', function (index) {
                    $.ajax({
                        url: 'admin/delete',
                        dataType: 'json',
                        data: 'id=' + id,
                        success: function (result) {
                            if (result.isDelete) {
                                obj.del();
                                layer.close(index);
                                layer.msg("删除成功！");
                            } else {
                                layer.close(index);
                                layer.msg("删除失败！");
                            }
                        }
                    });
                });
            }else if (obj.event == 'edit'){
                $.ajax({
                    url: 'admin/showOne',
                    dataType: 'json',
                    data: 'id=' + id,
                    success: function (result) {
                        form.val('updateFormFilter', {
                            id:result.id,
                            name: result.name,
                            pwd:result.pwd,
                            status: result.status
                        })
                    }
                });
                // 弹出修改表单
                layer.open({
                    type:1
                    ,content: $('#updateForm')
                    ,title:'编辑管理员信息'
                })
            }else {
                // 冻结管理员
                layer.confirm('确认要冻结该管理员么？', function (index) {
                    $.ajax({
                        url: 'admin/ban',
                        dataType: 'json',
                        data: 'id=' + id,
                        success: function (result) {
                            if (result.isBan) {
                                layer.close(index);
                                layer.msg("冻结成功！");
                            } else {
                                layer.close(index);
                                layer.msg("冻结失败！");
                            }
                        }
                    });
                });
            }
        });

        // 修改
        form.on('submit(updateSubmit)',function () {
            $.ajax({
                url: 'admin/update',
                data: $("#updateForm").serialize(),
                dataType: 'json',
                success: function (result) {
                    if (result.isUpdate) {
                        console.log('修改成功');
                        layer.msg('修改成功！');
                        $("#updateForm")[0].reset();
                        table.reload('adminTable');
                        layer.closeAll();
                    }else {
                        console.log('修改失败');
                        layer.msg('修改失败！');
                        $("#updateForm")[0].reset();
                        layer.closeAll();
                        table.reload('adminTable');
                    }
                }
            });
        });
    });
</script>
</body>
</html>